<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Gestion des machines</title>
    </h:head>
    <h:body>
        <style type="text/css"> 
            body{
                font-size: 12px !important;
            }

            .formMenu .ui-button{
                display:block;
                width: 150px;
            }

            .ui-layout-unit{
                border:none !important;
                padding:0;
            }

            .ui-layout-south {
                z-index:20 !important;
                overflow:visible !important;
            }

            .ui-layout-south .ui-layout-unit-content {
                overflow:visible !important;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }

            #titlePage{
                background: none;
                color:white;
                margin:0;
            }

            .titleLayout .ui-widget-content{
                background: none;
            }

            .titleLayout{
                border-bottom: 1px solid gray !important;
                padding:5px !important;
                background: #333;
                border-radius:0 !important;
            }
        </style>
        <p:layout fullPage="true">
            <p:layoutUnit styleClass="titleLayout" position="north">
                <h:form>
                    <p:commandButton style="background: red; color:white; z-index: 2; top: 0; left:0; position:absolute;" value="Se déconnecter" actionListener="#{loginBean.deconnexion()}" icon="ui-icon-extlink" />  
                </h:form>
                <h1 id="titlePage" style="text-align: center;">Gestion de vos machines</h1>
                <h:graphicImage alt="logo" url="/resources/img/logo.png" style=" z-index: 2; top: 0; right:0; position:absolute;" height="40"/>
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <!--Messages d'informations-->
                <p:growl sticky="5000" id="growl" showDetail="true" />


                <!-- Lister et modifier -->
                <p:panel header="Gestion de vos machines" rendered="#{configurationBean.authModeIsEnabled() eq true}">
                    <p:outputLabel value="Pour modifier, cliquer sur la cellule"  />
                    <br/>
                    <h:form id="formTable">
                        <p:dataTable id="listMachine" value="#{machineBean.lesMachines}"  var="mach" editable="true" 
                                     paginator="true" rows="10" >
                            <p:ajax event="rowEdit" listener="#{machineBean.onEdit}" update="listMachine :growl" />  
                            <p:column headerText="Libellé" sortBy="#{mach.libelle}" filterBy="#{mach.libelle}">
                                <!-- debut Edit de cellule-->
                                <p:cellEditor>
                                    <f:facet name="output">  
                                        <h:outputText value="#{mach.libelle}" />  
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText value="#{mach.libelle}" style="width:100%" required="true" />   
                                    </f:facet>                     
                                </p:cellEditor>
                                <!-- fin Edit de cellule-->
                            </p:column>
                            <p:column headerText="Adresse MAC" sortBy="#{mach.adresseMAC}" filterBy="#{mach.adresseMAC}" >
                                <!-- debut Edit de cellule-->
                                <p:cellEditor>
                                    <f:facet name="output">  
                                        <h:outputText value="#{mach.adresseMAC}" />  
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputMask value="#{mach.adresseMAC}" style="width:100%" mask="**:**:**:**:**:**" required="true"/>                                
                                    </f:facet>                     
                                </p:cellEditor>

                                <!-- fin Edit de cellule-->
                            </p:column>
                            <p:column headerText="Adresse IP" sortBy="#{mach.numero}" filterBy="#{mach.ip}" >
                                <!-- debut Edit de cellule-->
                                <h:outputText value="#{mach.ip}" />
                                <!-- fin Edit de cellule-->
                            </p:column>
                            <p:column headerText="Type de machine" sortBy="#{mach.typeMachine.libelle}" filterBy="#{mach.typeMachine.libelle}" >
                                <!-- debut Edit de cellule-->
                                <p:cellEditor>
                                    <f:facet name="output">  
                                        <h:outputText value="#{mach.typeMachine.libelle}" />  
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:selectOneMenu value="#{mach.typeMachine.idTypeMachine}" effect="fade" style="width: 100%;" required="true" >  
                                            <f:selectItems var="machineType" value="#{machineBean.lesTypesMachines}"  itemLabel="#{machineType.libelle}" itemValue="#{machineType.idTypeMachine}" />  
                                        </p:selectOneMenu>     
                                    </f:facet>                     
                                </p:cellEditor>
                                <!-- fin Edit de cellule-->
                            </p:column>

                            <p:column headerText="Supprimer">
                                <p:commandButton id="supprimer" actionListener="#{machineBean.supprimerMachine(mach)}" 
                                                 value="Supprimer" update="listMachine :growl" />                       

                            </p:column>
                            <p:blockUI block="formTable" trigger="supprimer">
                                <h:graphicImage library="images" name="ajax-loader.gif"  
                                                style="margin-right: 12px; vertical-align: middle;"/>
                            </p:blockUI>
                        </p:dataTable>
                    </h:form> 
                    <h:form>
                        <p:commandButton id="effectsDialogButton" value="Ajouter une machine" onclick="PF('dlg3').show();" style="margin-top: 10px" />  
                    </h:form>
                </p:panel>
                <table style="width:400px; margin:auto; margin-top:100px; text-align: center;">
                    <tr>
                        <td>
                            <p:panel header="Informations" rendered="#{configurationBean.authModeIsEnabled() eq false}">
                                La gestion de vos machines est pour le moment indisponible.<br/>
                                Pour de plus amples informations, nous vous invitons à contacter votre administrateur réseau.
                            </p:panel>
                        </td>
                    </tr>
                </table>
            </p:layoutUnit>
            <p:layoutUnit position="south">
                <p:panel style="text-align: center">
                    <h:form>
                        <h:outputLabel value="Copyright © 2014" escape="true"/>
                        <p:commandLink value=" - TeamMahum - " id="link" onclick="return false" style="text-decoration: none"/>
                        <h:outputLabel value="Tous droits réservés"/>
                        <p:overlayPanel for="link">
                            Jérémy LESOUHAITIER
                            <br/>
                            Arthur BERGELIN
                            <br/>
                            Edouard BIDALOT
                            <br/>
                            Jeffrey BEY
                            <br/>
                            Adrien BOISSON
                        </p:overlayPanel>
                    </h:form>
                </p:panel>
            </p:layoutUnit>
        </p:layout>

        <!--Dialog ajout machine-->
        <p:dialog  id="dialog" header="Ajout d'une machine" widgetVar="dlg3" modal="true" showEffect="clip" hideEffect="puff" height="350">   
            <h:form id="formulaire">
                <p:outputLabel value="Les champs notés * sont obligatoires " />
                <br />    
                <h:panelGrid columns="2">
                    <p:outputLabel value="Adresse mac * " />
                    <p:inputMask value="#{machineBean.machine.adresseMAC}"  label="mac" mask="**:**:**:**:**:**" required="true"/> 

                    <p:outputLabel value="Libellé * " />
                    <p:inputText value="#{machineBean.machine.libelle}"  label="libelle" required="true"/>

                    <p:outputLabel value="Type de machine * " />
                    <p:selectOneMenu value="#{machineBean.machine.typeMachine.idTypeMachine}" effect="fade" >  
                        <f:selectItems var="typeM" value="#{machineBean.lesTypesMachines}"  itemLabel="#{typeM.libelle}" itemValue="#{typeM.idTypeMachine}"/>  
                    </p:selectOneMenu>  

                    <p:commandButton id="valider" value="valider" actionListener="#{machineBean.ajouterMachine()}" update=":formTable:listMachine,:growl" onsuccess="PF('dlg3').hide()" />
                </h:panelGrid>

                <p:blockUI block="formulaire" trigger="valider">
                    <h:graphicImage library="images" name="ajax-loader.gif"  
                                    style="margin-right: 12px; vertical-align: middle;"/>
                </p:blockUI>
            </h:form>
        </p:dialog> 
    </h:body>
</html>
